<template>
	<view>
		<view class="tittab">
			<view class="tab" :class="{'istab':index==num}" v-for="(item,index) in tab" :key="index"
				@click="chantab(index)">
				{{item}}
			</view>
		</view>
		<view class="tiem">
			<view class="tiemli" :class="{'istiemli' :isindex==index}" v-for="(item,index) in week" :key="index"
				@click="chantiem(index,item)">
				<view class="">{{item.dayOfWeek}}</view>
				<view class="">{{item.date}}</view>
			</view>
		</view>
		<view class="sele">
			<view class="time">
				<view class="timeitem">
					场地/时间
				</view>
				<view class="timeitem11" v-for="(item,index) in timelist" :key="index">
					{{item.start_time}} - {{item.end_time}}
				</view>
			</view>
			<view class="price" v-for="(item,index) in tiemfe" :key="index">
				<view class="timeitem1">
					{{Number(index)}}场馆
				</view>
				<view class="itembox" v-for="(itemb,indexa) in item" :key="indexa">
					<view class="onx" v-if="itemb.is_pre==0">不可选</view>
					<view v-else class="onebox" :class="{'active':itemb.sele}" @click="itemtab(itemb,index)">
						<view class="">￥{{pic}}</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 140rpx;"></view>
		<view class="tiemboutt">
			<view class="bopric"><text style="font-size: 13px;color: #000;">合计:</text><text
					style="font-size: 12px;">￥</text>{{allprice}}</view>
			<view class="yesyvy" @click="gotomake">确认预约</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import request from '../../utils/request';
	let pic = ref(175)
	let num = ref(0)
	let tab = ref(['普通包场', '闲时包场'])
	let venueId = ref('')
	const timestamp = ref(0);
	const currentDate = ref('');
	const week = ref([]);
	const currentDayOfWeek = ref('');
	let isindex = ref(0)
	let tiemfi = ref(0)
	let changd = ref([])
	let tiemfe = ref()
	let type1 = ref(1)
	let token = ref()
	let sttime = ref('')
	let entime = ref('')
	let number = ref(1)
	let price_id = ref()
	let places_id = ref()
	let type2 = ref('1')
	let riqi = ref()
	let xian = ref(1)
	let chuang = ref(0)
	let list1 = ref()
	const timelist = ref([])
	let listtiem=ref([])
	let allprice = ref(0)
	let nowyear = ref()

	let changg=ref()

	onLoad((options) => {
		token.value = uni.getStorageSync('token')
		price_id.value = uni.getStorageSync('price_id')
		type1.value = uni.getStorageSync('type1')
		places_id.value = uni.getStorageSync('places_id')
		chuang.value = decodeURIComponent(options.num);
		for (let i = 1; i <= chuang.value; i++) {
			changd.value.push(`${i}号场`);
		}
		const datetiem = new Date()
		nowyear.value = datetiem.getFullYear()
		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${month}-${day}`;

		};
		riqi.value = formatDate(datetiem)
		console.log(riqi.value);
		requ()
	})

	const requ = () => {
		const datetiem = new Date()
		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		};
		const dateti = formatDate(datetiem)
		request.post('Price/getTimes', {
			data: {
				id: price_id.value,
				date: dateti,
				type: xian.value
			},
			header: {
				"token": token.value
			}
		}).then(res => {
			console.log(res.data);
			tiemfe.value = res.data.date
			for (let i = 1; i <= chuang.value; i++) {
				tiemfe.value[i].forEach(item => {
					item.sele = false
				})
			}
			timelist.value=[]
			res.data.date[1].forEach((item) => {
				timelist.value.push({
					end_time: item.end_time,
					start_time: item.start_time
				})
			})
			pic.value = res.data.price
		}).catch(err => {
			console.log(err);
		})
	}
	const chantab = (index) => {
		num.value = index
		isindex.value = 0
		if (index == 0) {
			type2.value = 1
			xian.value = 1
			// uni.setStorageSync("type2", type2.value)
			requ()
		} else if (index == 1) {
			type2.value = 2
			xian.value = 2
			// uni.setStorageSync("type2", type2.value)
			requ()
		}
	}
	const initializeDates = () => {
		timestamp.value = Date.now();
		const date = new Date(timestamp.value);
		date.setHours(0, 0, 0, 0);
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		currentDate.value = `${month}-${day}`;
		const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
		const todayIndex = date.getDay();
		currentDayOfWeek.value = daysOfWeek[todayIndex];
		week.value = [];
		for (let i = 0; i < 7; i++) {
			const currentDateCopy = new Date(date);
			currentDateCopy.setDate(date.getDate() + i);
			const currentYear = currentDateCopy.getFullYear();
			const currentMonth = String(currentDateCopy.getMonth() + 1).padStart(2, '0');
			const currentDay = String(currentDateCopy.getDate()).padStart(2, '0');
			const formattedDate = `${currentMonth}-${currentDay}`;
			const dayOfWeekIndex = currentDateCopy.getDay();
			const dayOfWeek = daysOfWeek[dayOfWeekIndex];
			week.value.push({
				currentMonth:currentMonth,
				currentDay:currentDay,
				date: formattedDate,
				dayOfWeek
			});
		}
	};
	const chantiem = (index, item) => {
		isindex.value = index
		riqi.value = item.date
		console.log(riqi.value);
		const datetiem = new Date()
		const formatDate = (date) => {
			const year = date.getFullYear();
			return `${year}`;
		};
		const dateti = formatDate(datetiem)
		request.post('Price/getTimes', {
			data: {
				id: price_id.value,
				date: `${dateti}-${riqi.value}`,
				type: xian.value
			},
			header: {
				"token": token.value
			}
		}).then(res => {
			console.log(res);
			tiemfe.value = res.data.date
			pic.value = res.data.price
		}).catch(err => {
			// console.log(err);
		})
	}
	let chg=ref([])
	const itemtab = (itemb, index) => {
		let a = listtiem.value.includes(`${index}|${nowyear.value}-${week.value[isindex.value].currentMonth}-${week.value[isindex.value].currentDay} ${itemb.start_time}|${nowyear.value}-${week.value[isindex.value].currentMonth}-${week.value[isindex.value].currentDay} ${itemb.end_time}`)
		console.log(a);
		if(a){
			tiemfe.value[index].forEach((item) => {
				if(item.start_time == itemb.start_time){
					item.sele = false
				}
			})
				
			chg.value=chg.value.filter((item)=>{
				return item!=`${index}号场-${itemb.start_time}-${itemb.end_time}`
			})
			listtiem.value = listtiem.value.filter((item) => {
				return item != `${index}|${nowyear.value}-${week.value[isindex.value].currentMonth}-${week.value[isindex.value].currentDay} ${itemb.start_time}|${nowyear.value}-${week.value[isindex.value].currentMonth}-${week.value[isindex.value].currentDay} ${itemb.end_time}`
			})
			allprice.value = Number(allprice.value) - Number(pic.value)
		}else{
			tiemfe.value[index].forEach((item) => {
				if(item.start_time == itemb.start_time){
					item.sele = true
				}
			})
			chg.value.push(`${index}号场-${itemb.start_time}-${itemb.end_time}`)
			listtiem.value.push(`${index}|${nowyear.value}-${week.value[isindex.value].currentMonth}-${week.value[isindex.value].currentDay} ${itemb.start_time}|${nowyear.value}-${week.value[isindex.value].currentMonth}-${week.value[isindex.value].currentDay} ${itemb.end_time}`)
			allprice.value = Number(allprice.value) + Number(pic.value)
				
		}

		changg.value= chg.value.map(item=>{
			return item
		}).join(',')
		console.log(changg.value);

		console.log(listtiem.value)
		console.log(tiemfe.value);
		console.log(chg.value)
	}
	
	onMounted(() => {
		initializeDates();
	});
	const gotomake = () => {
		const datetiem = new Date()
		const formatDate = (date) => {
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}`;

		};
		const dateti = formatDate(datetiem)
		let times = listtiem.value.map(item => {
			return item
		}).join(',')
		changg.value= chg.value.map(item=>{
			return item
		}).join(',')

		// console.log(times)
		request.post('Price/preOrder', {
			data: {
				data: `type1|${type1.value},type2|${type2.value},price_id|${price_id.value},places_id|${places_id.value}`,
				times: times
			},
			header: {
				"token": token.value
			}
		}).then(res => {
			if (res.code == 1) {
				const places_address = res.data.places_address;
				const places_name = res.data.places_name;
				const places_image = res.data.places_image;
				uni.setStorageSync("stetiem", `${dateti}-${riqi.value}`)
				uni.navigateTo({
					url: `/pages/makean/makean?places_address=${places_address}&places_image=${places_image}&places_name=${places_name}&date=${week.value[isindex.value].date}&times=${times}&price=${pic.value}&year=${nowyear.value}&allprice=${allprice.value}&changg=${changg.value}&type2=${type2.value}`
				});
			} else if (res.code == 0) {
				uni.showToast({
					title: '请先选择时间',
					icon: 'none'
				})
			}
		}).catch(err => {
			console.log(err);
		})

	}
</script>

<style scoped>
	.sele{
		display: flex;
	}
	.tittab {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.tab {
		height: 70rpx;
		line-height: 70rpx;
	}

	.istab {
		color: #10c696;
		border-bottom: 2px solid #10c696;
	}

	.tiem {
		display: flex;
		justify-content: space-evenly;
		margin-top: 20rpx;
	}

	.tiemli {
		width: 96rpx;
		height: 96rpx;
		font-size: 14px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.istiemli {
		background-color: #cff4ea;
		border-radius: 10rpx;
	}

	.field {
		width: 630rpx;
		height: 90rpx;
		background-color: #e7e7e7;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		margin-top: 20rpx;
	}

	.fitext {
		width: 160rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 11px;
	}

	.fieldli {
		width: 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-left: 1px solid #fff;
		text-align: center;
		font-size: 13px;
		color: #10c696;
	}

	.itembox {
		/* width: 630rpx; */
		height: 100rpx;
		display: flex;
		border: 1px solid #f3f3f3;
	}

	.itemti {
		width: 154rpx;
		height: 100rpx;
		font-size: 11px;
		line-height: 100rpx;
		text-align: center;
		background-color: #f3f3f3;
		border-bottom: 1px solid #7e7e7e;
	}

	.onx {
		background-color: #bababa;
		width: 120rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		font-size: 13px;
	}

	.onebox {
		width: 120rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		color: #fff;
		background-color: #10c696;
	}
	
	.active {
		background-color: #fff;
		color: #000;
	}

	.onefid {
		background-color: #fff;
		color: #000;
	}

	.choose {
		margin-top: 80rpx;
	}

	.tiemboutt {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;

	}

	.bopric {
		width: 472rpx;
		height: 100rpx;
		display: flex;
		/* align-items: center; */
		line-height: 100rpx;
		color: #10c696;
		background-color: #fff;
		padding-left: 30rpx;
	}

	.yesyvy {
		width: 280rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background-color: #10c696;
	}
	.timeitem{
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 11px;
		background-color: #e7e7e7;
		border: 1px solid #f3f3f3;

	}
	.timeitem1{
		width: 120rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 11px;
		background-color: #e7e7e7;
		color: #10c696;
		border: 1px solid #f3f3f3;
	}
	.timeitem11{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 11px;
		background-color: #e7e7e7;
		padding: 0 20rpx;
		border: 1px solid #f3f3f3;
	}
</style>